<template>
	<view class="topic_list">
		<view class="left">
			<scroll-view scroll-y class="left_view" show-scrollbar="false">
				<view class="menu_class_view" v-for="(classItem, classiIndex) in classList" :key="classiIndex">
					<view @click="selClassEvent(classiIndex)" :class="selClassIndex == classiIndex ? 'menu_class_item_sel' : 'menu_class_item'">{{ classItem.name }}</view>
				</view>
			</scroll-view>
		</view>
		<scroll-view scroll-y class="right_view">
			<view class="huati_list_view" v-for="(topicItem, topicIndex) in topicList" :key="topicIndex">
				<view @click="goToTopic(topicIndex)" :class="topicIndex == 0 ? 'huati_item_first' : 'huati_item'">
					<image :src="topicItem.picAbsolute" style="height: 80rpx; width: 80rpx; background-color: #eaeaea; border-radius: 8rpx"></image>
					<view class="huati_content">
						<label class="huati_title">{{ topicItem.name }}</label>
						<label class="huati_sub">{{ topicItem.follows }}人参与·{{ topicItem.trends }}条讨论</label>
					</view>
				</view>
			</view>
			<view v-if="topicList.length == 0 && loading == false" class="empty_order_view">
				<image style="width: 316rpx; height: 316rpx; margin-top: 214rpx" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"></image>
				<label style="margin-top: 20rpx; color: #272a37; font-size: 32rpx; line-height: 44rpx">暂无数据</label>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			classList: [],
			selClassIndex: 0,
			topicList: [],
			fromPublish: 0,
			loading: false
		};
	},
	methods: {
		topicClassListReqeust() {
			this.request.httpTokenJsonRequest('/mp-api/wx/topic/typeList', null, 'POST', true).then(res => {
				if (res.code == 0) {
					this.classList = res.data.list;
					this.request.httpTokenJsonRequest('/mp-api/wx/topic/myfollow', null, 'POST', true).then(res => {
						if (res.code == 0) {
							if (res.data.length > 0) {
								var topicType = {
									id: 0,
									name: '我的关注'
								};
								this.classList.unshift(topicType);
								this.topicListReqeust();
							}
						}
					});
				}
			});
		},
		topicListReqeust() {
			this.loading = true;
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			if (this.classList[this.selClassIndex].id == 0) {
				this.request.httpTokenJsonRequest('/mp-api/wx/topic/myfollow', null, 'POST', true).then(res => {
					this.loading = false;
					if (res.code == 0) {
						this.topicList = [...res.data];
					}
					uni.hideLoading();
				});
			} else {
				this.request.httpTokenJsonRequest(`/mp-api/wx/topic/list/${this.classList[this.selClassIndex].id}`, null, 'POST', true).then(res => {
					this.loading = false;
					if (res.code == 0) {
						this.topicList = [...res.data.list];
					}
					uni.hideLoading();
				});
			}
		},
		selClassEvent(index) {
			this.selClassIndex = index;
			this.topicList = [];
			this.$nextTick(() => {
				this.topicListReqeust();
			});
		},
		goToTopic(topicIndex) {
			if (this.fromPublish == 0) {
				uni.navigateTo({
					url: `/pages/community/topicDetail/topicDetail?id=${this.topicList[topicIndex].id}`
				});
			} else {
				uni.$emit('query', {
					topicId: this.topicList[topicIndex].id,
					topicName: this.topicList[topicIndex].name
				});
				uni.navigateBack();
			}
		}
	},
	onLoad(option) {
		if (option.fromPublish) {
			this.fromPublish = option.fromPublish;
			uni.setNavigationBarTitle({
				title: '选择话题'
			});
		}

		this.topicClassListReqeust();
	},
	onShow() {}
};
</script>

<style scoped>
.topic_list {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	background: #fff;
}
.left {
	border-radius: 0rpx 48rpx 0rpx 0rpx;
	height: 100%;
	overflow: hidden;
	background-color: #f8f8f8;
}
.left_view {
	width: 160rpx;
	height: 100%;
}
.menu_class_view {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.menu_class_item {
	height: 120rpx;
	line-height: 120rpx;
	text-align: center;
	font-size: 26rpx;
	color: #333333;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}
.menu_class_item_sel {
	background-color: #fff;
	color: #009977;
	height: 120rpx;
	line-height: 120rpx;
	font-size: 28rpx;
	text-align: center;
	font-weight: 500;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}
.right_view {
	background-color: #ffffff;
	height: 100%;
	border-radius: 0rpx 48rpx 0rpx 0rpx;
	width: calc(100% - 160rpx);
}
.huati_list_view {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.huati_item {
	display: flex;
	flex-direction: row;
	height: 110rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	width: calc(100% - 60rpx);
	border-bottom: 2rpx #f0f0f0 solid;
	margin-top: 30rpx;
}
.huati_item_first {
	display: flex;
	flex-direction: row;
	height: 110rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	width: calc(100% - 60rpx);
	border-bottom: 2rpx #f0f0f0 solid;
	margin-top: 18rpx;
}
.huati_content {
	width: calc(100% - 100rpx);
	margin-left: 20rpx;
	display: flex;
	flex-direction: column;
	height: 80rpx;
}
.huati_title {
	width: 100%;
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
	width: 100%;
	line-height: 28rpx;
	height: 28rpx;
	margin-top: 4rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}
.huati_sub {
	margin-top: 6rpx;
	font-size: 24rpx;
	color: #999999;
	font-weight: 400;
	width: 100%;
}
.empty_order_view {
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>
